<!--
<#include "../common/header.htm">
    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <#include "../account/leftTree.htm">
                <div class="col-md-10" id="hour">
                    <div class="stream_search" >
                        <el-form id="listForm" :inline="true" :model="form" class="demo-form-inline">
                            <el-form-item label="交易对手">
                                <el-input v-model="form.rivalName" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="最小金额">
                                <el-input v-model="form.minMoney" name="minmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="最大金额">
                                <el-input v-model="form.maxMoney" name="maxmoney" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item label="时间范围">
                                <el-date-picker
                                        align="left"
                                        v-model="form.beginTime"
                                        align="right"
                                        type="date"
                                        placeholder=""
                                        :picker-options="pickerOptions1">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="至">
                                <el-date-picker
                                        align="left"
                                        v-model="form.endTime"
                                        align="right"
                                        type="date"
                                        placeholder=""
                                        :picker-options="pickerOptions1">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  @click="clear">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="stream_body" >
                        <span class="title">交易时间段统计</span>
                        <div class="casemanage-switch">
                            <div class="casemanage-zhexiantu" :class="{active:showType==0}" @click="showType=0"  title="切换为块状显示">
                                <i class="iconfont icon-zhexiantu" :class="{active:showType==0}" id="font_zhexian"></i>
                            </div>
                            <div class="casemanage-list" :class="{active:showType==1}" @click="showType=1"  title="切换为列表显示">
                                <i></i>
                            </div>
                        </div>
                        <hr>
                        <div v-show="!showType" style="height: 300px;margin: 10px 10px 30px;">
                            <div id="main" style="height:300px;"></div>
                        </div>
                        <div v-show="showType">
                            <el-table
                                    ref="singleTable"
                                    stripe
                                    @sort-change='sortChange'
                                    :data="tableData"
                                    highlight-current-row
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        label="序号"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        property="HOUR"
                                        label="小时"
                                        width="70">
                                </el-table-column>
                                <el-table-column
                                        property="TOTALMONEY"
                                        sortable='custom'
                                        label="总金额"
                                        width="100">
                                    <template slot-scope="scope" v-if="scope.row.TOTALMONEY">
                                        <span >{{ scope.row.TOTALMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="TOTALNUMBER"
                                        label="总次数"
                                        width="90">
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="PUREINMONEY"
                                        label="净流入金额">
                                    <template slot-scope="scope" v-if="scope.row.PUREINMONEY">
                                        <span >{{ scope.row.PUREINMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="INMONEY"
                                        label="流入金额">
                                    <template slot-scope="scope" v-if="scope.row.INMONEY">
                                        <span >{{ scope.row.INMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        property="INMONEYPER"
                                        label="流入金额比">
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="INNUMBER"
                                        label="流入次数">
                                </el-table-column>
                                <el-table-column
                                        property="INNUMBERPER"
                                        label="流入次数比">
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTMONEY"
                                        label="流出金额">
                                    <template slot-scope="scope" v-if="scope.row.OUTMONEY">
                                        <span >{{ scope.row.OUTMONEY | formatMoney  }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        property="OUTMONEYPER"
                                        label="流出金额比">
                                </el-table-column>
                                <el-table-column
                                        sortable='custom'
                                        property="OUTNUMBER"
                                        label="流出次数">
                                </el-table-column>
                                <el-table-column
                                        property="OUTNUMBERPER"
                                        label="流出次数比">
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    background
                                    :current-page.sync="currentPage"
                                    :page-size="pageSize"
                                    @current-change="handleCurrentChange"
                                    layout="total,prev, pager, next"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script>
        var arr=[]
        function _checkedCallback() {
            if(_checkedAccount&&_checkedAccount.length>0){
                arr = _checkedAccount.map(m=>{
                    return "'"+m.split("_")[1]+"'";
                });
                arr = arr.join(',');
                hour.getlist(arr);
            }else{
                arr=[]
                arr = arr.join(',');
                hour.tableData=[]
                hour.total=""
                showEcharts('交易时间段统计',null,null,null)
            }
        }
        let hour=new Vue({
           el:"#hour",
           data:{
               showType:0,
               tableData: [],
               currentPage:1,
               form: {
                   rivalName: '',
                   beginTime: '',
                   endTime: '',
                   minMoney:"",
                   maxMoney:"",
               },
               pageSize:10,
               total:"",
               pickerOptions1: {
                   disabledDate(time) {
                       return time.getTime() > Date.now();
                   },
                   shortcuts: [{
                       text: '今天',
                       onClick(picker) {
                           picker.$emit('pick', new Date());
                       }
                   }, {
                       text: '昨天',
                       onClick(picker) {
                           const date = new Date();
                           date.setTime(date.getTime() - 3600 * 1000 * 24);
                           picker.$emit('pick', date);
                       }
                   }, {
                       text: '一周前',
                       onClick(picker) {
                           const date = new Date();
                           date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                           picker.$emit('pick', date);
                       }
                   }]
               },
           },
            filters: {
                formatMoney(value) {
                	if(!value) return 0;
                    if (Number.isInteger(value)) {
                        return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                    } else {
                        return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                    }
                },
            },
           created:function () {
               arr = arr.join(',');
               this.getlist();
           },
           methods: {
               onSubmit() {
                   this.getlist();
               },
               exportExcel(){
                   let a = "rivalName="+this.form.rivalName+"&minMoney="+this.form.minMoney+"&maxMoney="+this.form.maxMoney+"&beginTime="+getMyDate(this.form.beginTime)+"&endTime="+getMyDate(this.form.endTime)+"&cardList="+arr;
                   window.location.href="${ctx}/bill/stream/export/7"+a;
               },
               clear(){
                   this.form={
                       rivalName: '',
                       beginTime: '',
                       endTime: '',
                       minMoney:"",
                       maxMoney:"",
                   }
               },
               sortChange(column) {
                   request({
                       url: 'bill/stream/hourstatistics/'+this.currentPage+'/'+this.pageSize,
                       method: 'post',
                       data:{
                           rivalName: this.form.rivalName,
                           beginTime: getMyDate(this.form.beginTime),
                           endTime: getMyDate(this.form.endTime),
                           cardList:arr,
                           showType : 1,
                           minMoney: this.form.minMoney,
                           maxMoney: this.form.maxMoney,
                           sortName:column.prop,
                           sortOrder:column.order.replace("ending","")
                       }
                   }).then(result=>{
                       // console.log(result.data.data)
                       // var xAxis = result.data.data.allRows.map(m => m.HOUR);
                       // var echarts_data1 = result.data.data.allRows.map(m => m.INMONEY);
                       // var echarts_data2 = result.data.data.allRows.map(m => m.OUTMONEY);
                       // showEcharts('交易时间段统计',xAxis,echarts_data1,echarts_data2)
                       this.tableData=result.data.data.rows;
                       this.total=result.data.data.total;
                   })
               },
               handleCurrentChange(val) {
                   this.currentPage = val;
                   this.getlist(this.currentPage)
               },
               getlist(){
                   request({
                       url: 'bill/stream/hourstatistics/'+this.currentPage+'/'+this.pageSize,
                       method: 'post',
                       data:{
                           rivalName: this.form.rivalName,
                           minMoney: this.form.minMoney,
                           maxMoney: this.form.maxMoney,
                           beginTime: getMyDate(this.form.beginTime),
                           endTime: getMyDate(this.form.endTime),
                           cardList:arr
                       }
                   }).then(result=>{
                       console.log(result.data.data)
                       var xAxis = result.data.data.allRows.map(m => m.HOUR);
                       var echarts_data1 = result.data.data.allRows.map(m => m.INMONEY);
                       var echarts_data2 = result.data.data.allRows.map(m => m.OUTMONEY);
                       showEcharts('交易时间段统计',xAxis,echarts_data1,echarts_data2)
                       this.tableData=result.data.data.rows;
                       this.total=result.data.data.total;
                   })
               }
           }
       })
        $("#listForm").validate({
            rules: {
                minmoney : {
                    digits:true
                },
                maxmoney : {
                    digits:true
                }
            },
            messages: {
            }
        });
    </script>
    <style>
        input.error { border: 1px solid red; }
        label.error {
            background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
        .casemanage-switch .casemanage-zhexiantu.active {
            background-color: #4595ec;
        }
        .casemanage-switch .casemanage-zhexiantu {
            float: left;
            width: 50px;
            height: 35px;
            display: block;
            cursor: pointer;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            line-height: 35px;
            text-align: center;
        }
        #font_zhexian{
            color: #C1C2C3;
            font-size: 18px;
        }
        #font_zhexian.active{
            color: #F4F9FE;
        }
        .el-input__inner{
            border-color: #D2D6DE;
        }
        .el-input__inner:hover{
            border-color:#4595ec;
        }
        .el-input__inner:focus{
            border-color:#4595ec;
        }
        .el-button&#45;&#45;primary{
            background-color:#4595ec;
            border-color:#4595ec;
        }
        .el-button&#45;&#45;primary:focus, .el-button&#45;&#45;primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
    </style>
<#include "../common/footer.htm">-->
